<template>
  <el-container class="content">
    <el-aside width="200px" class="aside">
       <div class="login" ref="expand">
            <div class="avt">
                <el-avatar :size="50" :src="this.$store.state.userInfo.avatar"></el-avatar>
            </div>
            <div class="info">
                <div class="info_name">{{this.$store.state.userInfo.nike}}</div>
                <div class="info_nav">
                    <span><i class="iconfont el-icon-monitor"></i> 在线</span>
                  
                </div>
            </div>
      </div>
       <div class="nav_wrap">
          <el-menu
            default-active="1"
            class="nav"
            @open="handleOpen"
            @close="handleOpen"
            background-color="#3A5658"
            text-color="#fff"
            >
              <el-submenu v-for="(menuItem,index) in menu" :key="index" :index="index+''">
                <template slot="title">
                  <span class="textColl" style="display: inline-block;">{{menuItem.title}}</span>
                </template>
                <el-menu-item v-for="(childItem,Cindex) in menuItem.children" :key="Cindex" :index="index+'-'+Cindex" @click="TextFind(index,Cindex)">{{childItem}}</el-menu-item>
              </el-submenu> 
          </el-menu>
          <div class="add">
            <el-button class="el-icon-plus" type="info" circle @click="add"></el-button>
          </div>
       </div>
       <div class="finish">
            <el-button type="primary" icon="el-icon-edit" round @click="save">导出论文</el-button>
       </div>
    </el-aside>
    <el-container>
      <div class="mavonEditor">
      
          <mavon-editor ref="md_editor" @change="handbookChange" :ishljs="true" :toolbars="markdownOption" v-model="handbook" @imgAdd="handleEditorImgAdd"
        @save="save"/>
          <div class="export" ref="md" hidden></div>
      </div>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
export default class Home extends Vue {
      menu=[{'title':'第一章'}]
      changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九','十']
      TextArr=[]
      defaultItem=1
      markdownOption={
      bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: true, // 标记
      superscript: true, // 上角标
    
      subscript: true, // 下角标
      quote: true, // 引用
      link: true, // 链接
      imagelink: true, // 图片链接
  

      htmlcode: true, // 展示html源码
      help: true, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
    
      
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
    
      }
      handbook= "# 第一章"

    
      handbookChange(value,render){
        $(this.$refs.md).html(render)
        
        var h1Obj=$(this.$refs.md).find("h1");
        
        var arr=[]
        for(var i=0;i<h1Obj.length;i++){
             arr[i]={
                'title':$(h1Obj[i]).text()
             }
             var H2Arr=[]
             $(h1Obj[i]).nextAll().each(function(){
                 
                 if($(this)[0].tagName=='H2'){
                   H2Arr.push($(this)[0].innerText)
                 }
                 if($(this)[0].tagName=='H1')return false;
             })
            //  var H2Arr=[]
            //  for(var j=0;j<h2Obj.length;j++){
            //     H2Arr[j]=$(h2Obj[j]).text()
            //  }
              arr[i]['children']=H2Arr
        }
        this.menu=arr;
       
      }
      save(){
         
          var render=$(this.$refs.md)[0].innerHTML
          var LeftReplace=render.replace(/class="hljs-left"/g,`align=left`)
          var CenterReplace=LeftReplace.replace(/class="hljs-center"/g,`align=center`)
          var rightReplace=CenterReplace.replace(/class="hljs-right"/g,`align=right`)
         
          $(this.$refs.md).html("<div style='font-family: Microsoft YaHei;'>"+rightReplace+"</div>")
        
          $(this.$refs.md).wordExport("生成文档")

          
      }

      async handleEditorImgAdd (pos, $file) {
            let formdata = new FormData()

            console.log($file)
            formdata.append('file', $file)
         
            const res=await this.$httpajax.post('upload', formdata,{
                        'Content-Type':'multipart/form-data'
            })
            console.log(res)

            this.$refs.md_editor.$img2Url(pos, res.data);
            // if (res.data.code === 200) {
            //     this.$refs.md_editor.$img2Url(pos, url);
            // } else {
                
            // }
    
      }
      add(){
        
        this.$confirm('你正在添加论文章数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          
           this.handbook+="\n# 标题"

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
         
      }

      del(index,Cindex){
         
        this.$confirm('你正在删除论文章数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
           this.menu.splice(index,1)

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
         
      }
      handleOpen(key, keyPath) {
        this.TextFind(key,-1)
      }
      TextFind(index,cindex){
           var row=0
           if(cindex==-1){
              
               //$(".mavonEditor .v-note-show").find("h1")[index].scrollIntoView()
              row=parseInt($(".mavonEditor .v-note-show").find("h1").eq(index).find("a")[0].id.split("_")[1])
              
             
           }else{
              var sum=0;
              for(var i=0;i<index;i++){
                sum+=this.menu[i]['children'].length
              }
              var number=sum+cindex
            

              row=parseInt($(".mavonEditor .v-note-show").find("h2").eq(number).find("a")[0].id.split("_")[1])
                console.log(row)
           }

           $(".mavonEditor .v-note-edit").scrollTop(row*18)

      }
     
}
</script>
<style lang="less" scoped>
.content{
    height:100vh;
    min-height:700px;
    min-width:1200px;
  .aside{
    height:100%;
    background:	#2F4F4F;
    .login{
      width:100%;
      height:10%;
     
      display: flex;
      .avt{
        width:35%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
      }

      .info{
        width:65%;
        height: 100%;
        display: flex;
        justify-content: center;
        font-size:10px;
        color:white;
        flex-direction: column;
        .info_name{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .info_nav{
          margin-top:5%;
          cursor: pointer;
          
          .exit{
            margin-left:7%;
            .el-icon-switch-button{
              color:#ed5565;
            }
          }
          .el-icon-monitor{
            color:#1c84c6;
          }
          
        }
      }
    }
    .nav_wrap{
       height:70%;
       width:100%;
       margin:5% 0;
       overflow-y: auto;
       overflow-x: hidden;
       &::-webkit-scrollbar{display:none;}
       .nav{
           width:100%;
           .textColl{
              width:90%; 
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
           }
           
       }

       .add{
           width:100%;
           margin-top:10%;
           display: flex;
           justify-content: center;
           font-size:1.6rem;
           i{
             color:white;
           }
       }
    }

    .finish{
        display: flex;
        justify-content: center;
    }
  }
  
  .mavonEditor {
    width: 100%;
    
    .v-note-wrapper{
      min-height: 700px; 
      height:100vh;
    }
  }

  
}
h1,h2,h3,h4,h5,h6{
  font-family: Microsoft YaHei;
}

</style>